<template>
  <div class="app-container">
    <!-- 搜索筛选操作栏 -->
    <div class="filter-container clearfix">
      <el-button v-waves class="filter-item" @click="handleCreate">
        添加拍卖场次
      </el-button>
    </div>

    <!-- 表格 -->
    <el-table
      :key="tableKey"
      ref="table"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="顺序" prop="order" align="center" />
      <el-table-column label="名称" prop="name" align="center" />
      <el-table-column label="开始时间-结束时间" align="center">
        <template slot-scope="{ row }">
          {{ row.start_time }}-{{ row.end_time }}
        </template>
      </el-table-column>
      <el-table-column label="拍品数量" align="center" prop="product_num" />
      <el-table-column
        label="锁定商品数量"
        align="center"
        prop="locking_pro_num"
      />
      <el-table-column label="锁定期(天)" prop="locking_date" align="center" />
      <el-table-column
        label="预约限制(人)"
        align="center"
        prop="subscribe_limit"
      />
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button
            size="mini"
            plain
            type="primary"
            @click="handleUpdate(row)"
          >
            编辑
          </el-button>
          <el-button
            v-if="row.product_num === 0 && row.locking_pro_num === 0"
            size="mini"
            plain
            type="danger"
            @click="handleDelete(row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div v-if="total > 0" style="text-align: right">
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.per_page"
        @pagination="getList"
      />
    </div>

    <!-- 新增&修改 -->
    <el-dialog
      :title="type == 0 ? '添加拍卖场次' : '编辑拍卖场次'"
      :visible.sync="dialogVisible"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="40%"
      @closed="dialogClosed"
    >
      <div style="margin-top: 20px">
        <el-form
          ref="postForm"
          :model="form"
          :rules="rules"
          class="form-container"
        >
          <div class="createPost-main-container">
            <el-form-item label-width="200px" label="排序:" prop="order">
              <el-input v-model="form.order" class="input-spin" type="number" />
            </el-form-item>
            <el-form-item label-width="200px" label="名称:" prop="name">
              <el-input v-model.trim="form.name" />
            </el-form-item>
            <el-form-item label-width="200px" label="时间:" prop="dateInput">
              <el-time-picker
                v-model="form.dateInput"
                is-range
                arrow-control
                format="HH:mm"
                :clearable="false"
                start-placeholder="开始时间"
                end-placeholder="截拍时间"
                :disabled="type == 1"
                style="width: 100%"
                @change="dateInputHandle"
              />
            </el-form-item>
            <el-form-item
              label-width="200px"
              label="续拍锁定期(天):"
              prop="locking_date"
            >
              <el-input
                v-model="form.locking_date"
                :disabled="type == 1"
                class="input-spin"
                type="number"
              />
            </el-form-item>
            <el-form-item
              label-width="200px"
              label="单件拍品预约上限(人):"
              prop="subscribe_limit"
            >
              <el-input
                v-model="form.subscribe_limit"
                class="input-spin"
                type="number"
              />
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div style="margin-top: 40px; text-align: center">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="danger" @click="handleSubmit">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAuctioningManage,
  deleteAuctioning,
  createAuctioning,
  updateAuctioning
} from '@/api/common'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'AuctioningManages',
  components: {
    Pagination
  },
  directives: {
    waves
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      dialogVisible: false,
      type: 0,
      listQuery: {
        page: 1,
        per_page: 20
      },
      form: {
        order: undefined,
        name: undefined,
        start_time: undefined,
        end_time: undefined,
        locking_date: undefined,
        subscribe_limit: undefined,
        dateInput: undefined
      },
      rules: {
        order: [
          {
            required: true,
            message: '请输入排序',
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          }
        ],
        dateInput: [
          {
            required: true,
            message: '请选择时间',
            trigger: 'change'
          }
        ],
        locking_date: [
          {
            required: true,
            message: '请输入续拍锁定期',
            trigger: 'blur'
          }
        ],
        subscribe_limit: [
          {
            required: true,
            message: '请输入单件拍品预约上限',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    clearFilter() {
      this.handleFilter()
    },
    // 获取时间
    dateInputHandle(e) {
      if (e && e.length > 0) {
        this.form.start_time =
          (new Date(e[0]).getHours() < 10 ? '0' : '') +
          new Date(e[0]).getHours() +
          ':' +
          (new Date(e[0]).getMinutes() < 10 ? '0' : '') +
          new Date(e[0]).getMinutes()
        this.form.end_time =
          (new Date(e[1]).getHours() < 10 ? '0' : '') +
          new Date(e[1]).getHours() +
          ':' +
          (new Date(e[1]).getMinutes() < 10 ? '0' : '') +
          new Date(e[1]).getMinutes()
      }
      this.form.dateInput = e
    },
    getList() {
      this.listLoading = true
      getAuctioningManage(this.listQuery)
        .then((response) => {
          const { data, total } = response.data
          this.list = data
          this.total = total
        })
        .finally(() => {
          this.listLoading = false
        })
    },
    // 编辑
    handleUpdate(row) {
      this.type = 1
      this.form = Object.assign({}, row)
      this.$set(this.form, 'dateInput', [
        new Date(
          '',
          '',
          '',
          this.form.start_time.split(':')[0],
          this.form.start_time.split(':')[1]
        ),
        new Date(
          '',
          '',
          '',
          this.form.end_time.split(':')[0],
          this.form.end_time.split(':')[1]
        )
      ])
      this.dialogVisible = true
    },
    // 新增
    handleCreate() {
      this.type = 0
      this.dialogVisible = true
    },
    dialogClosed() {
      this.form = {
        order: undefined,
        name: undefined,
        start_time: undefined,
        end_time: undefined,
        locking_date: undefined,
        subscribe_limit: undefined,
        dateInput: undefined
      }
      this.fileList = []
      this.$refs['postForm'].resetFields()
    },
    handleSubmit() {
      this.$refs.postForm.validate(async(valid) => {
        if (valid) {
          this.listLoading = true
          if (this.type == 0) {
            createAuctioning(this.form)
              .then(() => {
                this.$notify({
                  title: '提示',
                  message: '新增成功',
                  type: 'success',
                  duration: 2000
                })
                this.dialogVisible = false
                this.getList()
              })
              .catch(() => {
                this.listLoading = false
              })
          } else {
            updateAuctioning(this.form['id'], this.form)
              .then(() => {
                this.$notify({
                  title: '提示',
                  message: '编辑成功',
                  type: 'success',
                  duration: 2000
                })
                this.dialogVisible = false
                this.getList()
              })
              .catch(() => {
                this.listLoading = false
              })
          }
        }
      })
    },
    dialogClosed() {
      this.form = {
        order: undefined,
        name: undefined,
        parent_id: undefined,
        image_url: undefined
      }
      this.fileList = []
      this.$refs['postForm'].resetFields()
    },
    // 处理新增||处理编辑
    handleToggleEdit() {
      this.$refs.postForm.validate(async(valid) => {
        if (valid) {
          if (this.type == 0) {
            createAuctioning(this.form).then(() => {
              this.$notify({
                title: '提示',
                message: '新增成功',
                type: 'success',
                duration: 2000
              })
              this.dialogVisible = false
              this.getList()
            })
          } else {
            updateAuctioning(this.form['id'], this.form).then(() => {
              this.$notify({
                title: '提示',
                message: '编辑成功',
                type: 'success',
                duration: 2000
              })
              this.dialogVisible = false
              this.getList()
            })
          }
        }
      })
    },
    // 删除
    handleDelete(id) {
      // this.$confirm('该拍卖场次下有拍品，不能删除。', '提示', {
      //   confirmButtonText: '知道了',
      //   type: 'warning'
      // }).then(() => {

      // }).catch(() => {

      // });

      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.listLoading = true
          deleteAuctioning(id)
            .then(() => {
              // 用于判断删除最后一页的所有数据，自动减少一页数据
              if (
                this.list.length == 1 &&
                this.listQuery.page > 1 &&
                this.listQuery.page >
                  parseInt((this.total - 1) / this.listQuery.per_page)
              ) {
                this.listQuery.page = this.listQuery.page - 1
              }
              this.$notify({
                title: '提示',
                message: '删除成功',
                type: 'success',
                duration: 2000
              })
              this.getList()
            })
            .catch(() => {
              this.listLoading = false
            })
        })
        .catch(() => {})
    }
  }
}
</script>
